<template>
  <div>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple" style="height: 300px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">跟单周期分析</div>
                    </div>
                    <toroidal style="width: 300px;height: 300px;margin-top: 0;margin-left: 30px;"></toroidal>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple" style="height: 150px;width: 100%;display: flex;justify-content: space-evenly;">
                    <div class="div1">
                       <div>签约金额/万元</div>
                       <div style="font-size: 35px;">820.00</div>
                       <div>同比3.9 → 环比 1.9 →</div>
                    </div>
                     <div class="div1">
                       <div>客户数量</div>
                       <div style="font-size: 35px;">62</div>
                       <div>同比3.9 → 环比 1.9 →</div>
                    </div>
                     <div class="div1">
                       <div>紧跟商机</div>
                       <div style="font-size: 35px;">18</div>
                       <div>商机滚动提醒 6</div>
                    </div>
                     <div class="div1">
                       <div>指标完成率</div>
                       <div style="font-size: 35px;">89.3%</div>
                       <div>同岗位排名 13/130</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple" style="height: 300px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">专业度模型</div>
                    </div>
                    <div>
                        <radar style="width: 300px;height: 250px;margin: auto;"></radar>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple" style="height: 300px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">擅长客户领域</div>
                    </div>
                    <div>
                        <div style="display: flex;margin-top: 40px;">
                            <div style="color: black;font-weight: bold;margin-left: 20px;">国家行业</div>
                            <div style="margin-left: 20px;">占比成功客户{{ dd }}%</div>
                        </div>
                        <el-progress :percentage="dd" style="width: 300px;margin-left: 20px;margin-top: 10px;" color="rgb(27, 97, 202)" stroke-width="13"></el-progress>
                    </div>
                    <div>
                        <div style="display: flex;margin-top: 10px;">
                            <div style="color: black;font-weight: bold;margin-left: 20px;">合同管理</div>
                            <div style="margin-left: 20px;">占比客户需求{{ dd1 }}%</div>
                        </div>
                        <el-progress :percentage="dd1" style="width: 300px;margin-left: 20px;margin-top: 10px;" color="rgb(27, 97, 202)" stroke-width="13"></el-progress>
                    </div>
                    <div>
                        <div style="display: flex;margin-top: 10px;">
                            <div style="color: black;font-weight: bold;margin-left: 20px;">国家行业</div>
                            <div style="margin-left: 20px;">占比客户规模{{ dd2 }}%</div>
                        </div>
                        <el-progress :percentage="dd2" style="width: 300px;margin-left: 20px;margin-top: 10px;" color="rgb(27, 97, 202)" stroke-width="13"></el-progress>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple" style="height: 450px;margin-top: -150px;">
                    <div style="display: flex;margin-left: 30px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;"></div>
                        <span style="font-size: 20px;font-weight: bold;margin-left: 10px;margin-top: -6px;">综合评价</span>
                    </div>
                    <div style="display: flex;justify-content: center;margin-top: -40px;">
                        <img src="../../assets/img/VchartAll/1.png" alt="">
                    </div>
                    <div>
                        <ul class="ul1">
                            <li>
                                <div class="numtop" style="color: red;">89.3</div>
                                <div class="zitop">销售人员综合评分</div>
                            </li>
                            <li>
                                <div class="numtop">11/158</div>
                                <div class="zitop">同岗位排名</div>
                            </li>
                            <li>
                                <div class="numtop">90.3</div>
                                <div class="zitop">专业度评分</div>
                            </li>
                            <li>
                                <div class="numtop">88.6</div>
                                <div class="zitop">勤奋度评分</div>
                            </li>
                            <li>
                                <div class="numtop">72.5</div>
                                <div class="zitop">协作力评分</div>
                            </li>
                            <li>
                                <div class="numtop">92.5</div>
                                <div class="zitop">岗位胜任评分</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple" style="height: 300px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">勤奋度模型</div>
                    </div>
                    <div>
                        <radar2 style="width: 300px;height: 250px;margin: auto;"></radar2>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple" style="height: 300px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">丢单原因分析</div>
                    </div>
                    <div>
                        <toroidaltwo style="width: 400px;height: 400px;margin-top: -60px;margin-left: -15px;"></toroidaltwo>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple" style="height: 300px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">业绩同比分析</div>
                    </div>
                    <div>
                            <zhe style="height: 300px;margin-top: -20px;width: 800px;"></zhe>
                    </div>
                </div>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple" style="height: 300px;">
                <div>
                    <bing style="width: 300px;height: 300px;margin-left: 20px;padding: 10px;"></bing>
                </div>
            </div></el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12" style="">
                <div class="grid-content bg-purple" style="height: 400px;">
                    <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                        <div style="width: 10px;height: 10px;border-radius: 50%;border: 3px solid rebeccapurple;background-color: red;display: flex;"></div>
                        <div style="margin-left: 10px;margin-top: -3px;">中国地图</div>
                    </div>
                    <map1 style="width: 500px;height: 400px;margin:auto"></map1>
                </div>
            </el-col>
            <el-col :span="12" style="">
                <div class="grid-content bg-purple" style="height: 400px;">
                   <div>
                        <vchart style="padding-top: 20px;"></vchart>
                   </div>
                </div>
            </el-col>
        </el-row>
    </div>
  </div>
</template>
<script>
import bing from '../../components/chartview/bing.vue'
import zhe from './zhe.vue'
import toroidal from './toroidal.vue'
import toroidaltwo from './toroidaltwo.vue'
import Toroidaltwo from './toroidaltwo.vue';
import radar from './radar.vue'
import radar2 from './radar2.vue'
import map1 from './map1.vue'
import vchart from '../../components/chartview/zhezhu.vue'
export default{
    data(){
      return{
        dd: '54',
        dd1: '32',
        dd2: '69'
      }
    },
    components:{
      bing,
      zhe,
      toroidal,
      toroidaltwo,
      radar,
      radar2,
      map1,
      vchart
    }
}
</script>
<style>
.ul1{
    display: flex;
    margin-top: -20px;
    justify-content: space-around;
}
.ul1 li{
    list-style: none;
}
.numtop{
    font-size: 30px;
}
.zitop{
    color: rgb(186, 178, 190);
}
.div1{
    padding-top: 40px;
    padding-left: 10px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: aliceblue;
  }
  .bg-purple {
    background: aliceblue;
  }
  .bg-purple-light {
    background: aliceblue;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: aliceblue;
  }
</style>